<template>
  <el-dialog :close-on-click-modal="false"   title="考勤点管理" :visible="show" :before-close="close">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="自定义路线" name="1">
            <el-button style="margin-bottom: 10px" v-if="!tableList || tableList.length < 20" icon="el-icon-plus" @click="add">添加考勤点</el-button>
            <el-table :data="tableList" border style="width: 100%">
            <el-table-column prop="name" label="名称" min-width="120" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column prop="type" label="类型" min-width="120" align="left" show-overflow-tooltip>
                <template slot-scope="{ row }">
                <span>{{ row.type == 1 ? '点位' : '范围' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
                <template slot-scope="{ row, $index }">
                <el-button @click="edit(row, $index)" type="text" size="small">编辑</el-button>
                <el-button @click="del(row, $index)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="预设路线" name="2">
            <el-form ref="form" :model="form">
                <el-form-item label="选择路线" prop="route">
                    <SelectByApis v-model="form.route" :api="roadList" :filterable="true" @change="onChangeSel"></SelectByApis>
                </el-form-item>
            </el-form>
            <Map v-if="show" ref="MapRef" style="height:400px;"></Map>
        </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>

    <!-- 弹窗 -->
    <editPlace :show.sync="showPlace" :item="current" @change="editPlaceChange"></editPlace>
  </el-dialog>
</template>

<script>
import Map from '@/components/Map'
import SelectByApis from '@/components/SelectbyApis';
import editPlace from './editPlace.vue';
import { memberEditByCheck } from '@/api/person';
import { roadList } from "@/api/checkRoad";


let mapLayer = {}
export default {
  components: {
    editPlace,
    SelectByApis,
    Map
  },
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: null
    }
  },
  watch: {
    item: {
      handler(val) {
        this.form = val || {};
        this.tableList = [];
        if (val && val.checkArea) {
          try {
            this.tableList = JSON.parse(val.checkArea);
          } catch (e) {
            console.log('JSON解析出错：', val.checkArea);
          }
        }
      },
      immediate: true
    },
    show: {
      handler(val) {
        if(!val) {
            this.resetForm('form');
            this.form = {}
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      form: {},
      tableList: [],
      showPlace: false,
      current: {},
      currentIndex: null,
      activeName: '1'
    };
  },
  methods: {
    roadList,
    workChange(e) {
      this.form.workingShiftId = e.id;
      this.form.workingShiftTitle = e.title;
    },
    dateChange(e) {
      this.form.timeInfo = e.join(',');
    },
    // 添加打卡地点
    add() {
      this.currentIndex = null;
      this.current = {};
      this.showPlace = true;
    },
    // 删除打卡地点
    del(row, index) {
      this.$modal.confirm('确定删除此条数据吗？').then((res) => {
        this.tableList.splice(index, 1);
        this.form.checkArea = JSON.stringify(this.tableList);
      });
    },
    // 修改打卡地点
    edit(row, index) {
      this.currentIndex = index;
      this.current = JSON.parse(JSON.stringify(row));
      this.showPlace = true;
    },
    editPlaceChange(e) {
      if (this.currentIndex == null) {
        this.tableList.push(e);
      } else {
        this.$set(this.tableList, this.currentIndex, e);
      }
      this.form.checkArea = JSON.stringify(this.tableList);
    },
    submit() {
        const params = structuredClone(this.form);
        if(!this.form.route) {
            params.route = ''
        }
        console.log('打印当前编辑：', params);
        // delete params.cardNum;
        memberEditByCheck(params).then((res) => {
            // 验证成功-编辑
            this.$emit('change', params);
            this.close();
        });
    },
    close() {
      this.form = {};
      this.activeName = "1"
      this.$emit('update:show', false);
    },
    handleClick() {
        if(this.activeName == '2') {
            console.log(this.form)
            if(this.form.route) {
                const route = JSON.parse(this.form.route);
                const routeId = route.map(item => Number(item.id));
                roadList({pageSize: 999}).then(res => {
                    if(res.data && res.data.length) {
                        const checkRoad = res.data.filter(item => {
                            if(routeId.includes(item.id)) {
                                return item;
                            }
                        })
                        this.setLocation(checkRoad)
                    }
                })
            }
        }
    },
    onChangeSel(list) {
        this.$nextTick(()=>{
            this.$refs['MapRef'].remove()
            this.$refs['MapRef'].createLayers(list)
        })
    },
    setLocation(list) {
        this.$nextTick(()=>{
            this.$refs['MapRef'].createLayers(list)
        })
    },
  }
};
</script>

<style lang="scss" scoped></style>
